<template>
  <div class="app-container member-message-summary">
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="filters"
      class="demo-form-inline filter-container"
    >
      <el-form-item label="会员账户：" prop="memberAccount">
        <el-input v-model="filters.memberAccount" @keyup.enter.native="submitFilterForm" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
    </el-form>
    <el-table
      :data="tableList"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="会员账号" align="center" prop="userName"></el-table-column>
      <el-table-column label="层级" align="center" prop="levelName"></el-table-column>
      <el-table-column label="普通信件数量" align="center" prop="ordinaryNum"></el-table-column>
      <el-table-column label="回复信件数量" align="center" prop="replyNum"></el-table-column>
      <el-table-column label="活动信件数量" align="center" prop="activityNum"></el-table-column>
      <el-table-column label="系统消息数量" align="center" prop="systemNum"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button
            v-if="roleCheck('mail-user-check')"
            type="text"
            @click="openDialog({dialogName: 'userLetterList',
                     props: row
                     });currentUser=row.userName"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-dialog
      v-if="dialogName === 'userLetterList'"
      :visible="dialogVisible"
      returnButtonName="返回"
      :callback="resetCustomDialog"
    >
      <div slot="title">{{'会员账号：'+currentUser}}</div>
      <letter-list v-if="dialogName === 'userLetterList'" :row-data="dialogProps"/>
    </custom-dialog>
  </div>
</template>

<script>
import {
  form, resetForm, grid, dialog,
} from '@/build';
import CustomDialog from '@/components/customDialog/index';
import { userLetterSummaryListApi } from '@/services/api/letterSummary';

import LetterList from './letterList';
import { getUserLevelList } from '@/services/api/userLevel';

export default {
  name: 'user-letter-summary-list',

  mixins: [form, resetForm, grid, dialog, CustomDialog],

  components: {
    LetterList,
  },

  data() {
    return {
      levelList: [],
      tableData: '',
      filters: {
        memberAccount: '',
      },
      memberAccount: '',
      currentUser: '',
    };
  },

  methods: {
    resetCustomDialog() {
      this.closeDialog();
    },
    submitFilterForm() {
      if (!this.filters.memberAccount.trim()) {
        this.$message({
          message: '会员帐号不能为空',
          type: 'error',
        });
        return;
      }
      if (this.filters.memberAccount.split(',').length > 1 || this.filters.memberAccount.split('，').length > 1) {
        this.$message({
          message: '只能填写一个会员帐号',
          type: 'error',
        });
        return;
      }
      this.filters.memberAccount = this.filters.memberAccount.trim();
      this.gridSearch();
    },
  },
  computed: {
    tableList() {
      if (this.tableData) {
        return [this.tableData];
      }
      return [];
    },
  },
  mounted() {
    this.bindGet(userLetterSummaryListApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.bindGet(getUserLevelList, 'levelList', { action: 'levelList' });
    this.doGet({ action: 'levelList' });
  },
};
</script>
<style lang="scss" scoped>
  .member-message-summary{
    height: 1400px;
    overflow: auto;
    .custom-dialog {
      position: absolute;
      left: 0px;
      padding: 0 10px !important;
      top: 0px !important;
      width: 100%;
      z-index: 999;
      background-color: #fff;
      min-height: 100%;
    }
  }

</style>
